<template>
  <div id="Map" ref="map"></div>
</template>

<script>
import * as AMapWind from 'amap-wind'
import gfs1 from '../util/gfs.js'
export default {
  created() {},
  mounted() {
    this.initMap()
    // this.windLayerInfo()
  },
  methods: {
    // An highlighted block
    // 初始化地图
    initMap() {
      const map = new AMap.Map('Map', {
        // viewMode: '3D',
        resizeEnable: true,
        zoom: 0,
        center: [113.53450137499999, 34.44104525],
        // mapStyle: 'amap://styles/dark',
        zooms: [0, 18],
      })
      import('amap-wind').then(({ WindLayer }) => {
        fetch(
          'https://sakitam.oss-cn-beijing.aliyuncs.com/codepen/wind-layer/json/wind.json'
        )
          .then((res) => res.json())
          .then((res) => {
            const windLayer = new WindLayer(res, {
              windOptions: {
                // colorScale: scale,
                velocityScale: 1 / 20,
                paths: 5000,
                // eslint-disable-next-line no-unused-vars
                colorScale: [
                  'rgb(36,104, 180)',
                  'rgb(60,157, 194)',
                  'rgb(128,205,193 )',
                  'rgb(151,218,168 )',
                  'rgb(198,231,181)',
                  'rgb(238,247,217)',
                  'rgb(255,238,159)',
                  'rgb(252,217,125)',
                  'rgb(255,182,100)',
                  'rgb(252,150,75)',
                  'rgb(250,112,52)',
                  'rgb(245,64,32)',
                  'rgb(237,45,28)',
                  'rgb(220,24,32)',
                  'rgb(180,0,35)',
                ],
                lineWidth: 2,
                // colorScale: scale,
                generateParticleOption: false,
              },
              zIndex: 20,
              // map: map,
              // projection: 'EPSG:4326'
            })

            console.log(res)

            windLayer.appendTo(map)
          })
      })
    },
    // // 风场
    // windLayerInfo() {
    //   //gfs数据：链接https://a.amap.com/jsapi_demos/static/resource/heatmapData.js
    //   this.windLayer = new AMapWind.WindLayer(gfs1, {
    //     windOptions: {
    //       globalAlpha: 0.9, // 粒子透明度
    //       velocityScale: 1 / 50, //粒子速度
    //       paths: 800, //粒子数量
    //       colorScale: [
    //         'rgb(36,104, 180)',
    //         'rgb(60,157, 194)',
    //         'rgb(128,205,193 )',
    //         'rgb(151,218,168 )',
    //         'rgb(198,231,181)',
    //         'rgb(238,247,217)',
    //         'rgb(255,238,159)',
    //         'rgb(252,217,125)',
    //         'rgb(255,182,100)',
    //         'rgb(252,150,75)',
    //         'rgb(250,112,52)',
    //         'rgb(245,64,32)',
    //         'rgb(237,45,28)',
    //         'rgb(220,24,32)',
    //         'rgb(180,0,35)',
    //       ], //粒子颜色
    //       lineWidth: 2,
    //       generateParticleOption: false,
    //     },
    //     zIndex: 20,
    //   })
    //   this.windLayer.appendTo(this.map)
    // },
  },
}
</script>

<style lang="less">
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
#Map {
  height: 100%;
  width: 100%;
}
.current-point {
  width: auto;
  background: white;
  position: absolute;
  top: 100px;
  left: 500px;
  z-index: 1200;
  padding: 2px 5px;
  border-radius: 5px;
  margin: 15px;
}
.marker_timetip_3Jw {
  position: fixed;
  display: none;
  left: 50px;
  top: 10px;
  width: fit-content;
  box-sizing: content-box;
  z-index: 401;
  padding: 3px 10px;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  border-radius: 4px;
}
</style>
